<template>
  <div>
    <el-dialog
      v-model="props.visible"
      title="生产单列表"
      width="80%"
      @close="handleCancel"
    >
      <el-form
        :model="queryParams"
        class="flex-box"
        ref="queryRef"
        :inline="true"
      >
        <div>
          <el-form-item label="发货单编码" prop="code">
            <el-input
              v-model.trim="queryParams.code"
              placeholder="请输入发货单编码"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="生产单编码" prop="produceNo">
            <el-input
              v-model.trim="queryParams.produceNo"
              placeholder="请输入生产单编码"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">
              搜索
            </el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </div>
        <el-button
          type="primary"
          plain
          @click="handleSubmit"
          :disabled="multiple"
        >
          确认
        </el-button>
      </el-form>
      <el-row :gutter="20" style="overflow: auto">
        <el-col :span="8">
          <el-table
            v-loading="loading"
            :data="orderList"
            stripe
            border
            style="cursor: pointer"
            @cell-click="handleClick"
            ref="orderListTable"
            highlight-current-row
          >
            <el-table-column
              label="序号"
              width="55"
              type="index"
              align="center"
            />
            <el-table-column
              label="发货单编码"
              align="center"
              prop="code"
            ></el-table-column>
            <el-table-column
              label="发货单时间"
              align="center"
              prop="deliveryDate"
            >
              <template v-slot="{ row }">
                {{ row.deliveryDate?.split("T")[0] }}
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="16">
          <el-table
            ref="orderRef"
            v-loading="loadingInfo"
            :data="statementList"
            row-key="deliveryDetailId"
            stripe
            border
            style="cursor: pointer"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              :reserve-selection="true"
              width="55"
            />
            <el-table-column
              label="生产单编码"
              align="center"
              width="150"
              prop="produceNo"
            ></el-table-column>
            <el-table-column
              label="出版编码"
              align="center"
              width="150"
              prop="pubNo"
            ></el-table-column>
            <el-table-column
              label="书刊编码"
              align="center"
              width="100"
              prop="bookCode"
            ></el-table-column>
            <el-table-column
              label="发货品种"
              width="300"
              align="center"
              prop="productName"
            ></el-table-column>
            <el-table-column
              label="订单数量"
              width="160"
              align="center"
              prop="orderCount"
            ></el-table-column>
            <el-table-column
              label="发货数量"
              align="center"
              width="110"
              prop="quantity"
            >
            </el-table-column>
            >
          </el-table>
        </el-col>
      </el-row>
      <div class="footer">
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { toNumber } from "@/utils/ruoyi";
import { getDeliveryList, getProduceOrder } from "@/api/production/settlement";
const emit = defineEmits(["changeUpdate", "cancel"]);
const { proxy } = getCurrentInstance();

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  paperType: {
    type: String,
    default: "",
  },
  machineId: {
    type: String,
    default: "",
  },
  orderSelectList: {
    type: Array,
    default: () => {
      [];
    },
  },
});

const orderRef = ref(null);
const orderList = ref([]);
const statementList = ref([]);
const multiple = ref(true);
const selectRow = ref([]);
const loading = ref(false);
const loadingInfo = ref(false);
const orderListTable = ref(null);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  status: 2,
});
watch(
  () => props.visible,
  (val) => {
    if (val) {
      handleQuery();
      nextTick(() => {
        orderRef.value.clearSelection();
        if (props.orderSelectList.length > 0) {
          props.orderSelectList.forEach((item) => {
            orderRef.value.toggleRowSelection(item, true);
          });
        }
      });
    }
  }
);
const total = ref(0);
// 选中订单
const handleClick = (row) => {
  loadingInfo.value = true;
  getProduceOrder({ id: row.id }).then((res) => {
    res?.rows.forEach((item) => {
      item.deliveryDetailId = item.id;
      item.warehousingCount = item.quantity;
    });
    statementList.value = res?.rows;
    loadingInfo.value = false;
  });
};

// 选中
const handleSelectionChange = (row) => {
  selectRow.value = row;
  multiple.value = !row.length;
};
const handleSubmit = () => {
  emit("changeUpdate", selectRow.value);
};
const handleCancel = () => {
  statementList.value = [];
  proxy.resetForm("queryRef");
  emit("cancel");
};
const getList = async () => {
  loading.value = true;
  const res = await getDeliveryList(queryParams.value);
  orderListTable.value.setCurrentRow(res.rows[0]);
  loading.value = false;
  orderList.value = res.rows;
  if (orderList.value.length > 0) {
    handleClick(orderList.value[0]);
  } else {
    statementList.value = [];
  }
  total.value = res.total;
};
// 搜索
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
  proxy.resetForm("queryRef");
  handleQuery();
};

// getList()
</script>

<style lang="scss" scoped></style>
